<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>14-vertical-align</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#box{width:800px;height:700px;background-color:#ccc;border:1px solid red;margin:0 auto;}
			#box ul{width:400px;height:560px;;margin:30px auto;}
			#box ul li{width:400px;padding:20px 0;font-size:0;}
			#box ul li img{width:85px;height:85px;border-radius:50%;vertical-align: middle;box-shadow:0 0 0 3px #666;}
			#box ul li div{display:inline-block;width:240px;margin-left:50px;font-size:14px;vertical-align: middle;}
			#box ul li div h3{padding:5px 0;}
			#box ul li div span{padding:5px 0;}
			#box ul li p{width:400px;border:1px solid red;margin-top:30px;}
			#box ul li img:hover{box-shadow:0 0 0 3px #f66;}
			#box ul li div h3:hover{color:#f66;}
			#box ul li div span:hover{color:#f66;}
			</style>
	</head>
	<body>
		
		<div id="box">
			<ul>
				<li>
					<img src="../images/m-1.jpg"  alt="m-1" title="m-1"/>
					<div>
						<h3>AmyRoiland</h3>
						<span>&lceil;Amy Roliand&rfloor; 美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</span>
					</div>
					<p></p>
				</li>
				<li>
					<img src="../images/m-2.jpg"  alt="m-2" title="m-2"/>
					<div>
						<h3>TonyaS.d</h3>
						<span>&lceil;Tonya S.&rfloor; 美国</span>
					</div>
					<p></p>
				</li>
				<li>
					<img src="../images/m-3.jpg"  alt="m-3" title="m-31"/>
					<div>
						<h3>EvaVelt</h3>
						<span>&lceil;EvaVelt&rfloor; 荷兰时尚博主</span>
					</div>
					<p></p>
				</li>
				<li>
					<img src="../images/m-4.jpg"  alt="m-4" title="m-4"/>
					<div>
						<h3>Nicola Nilsen</h3>
						<span>&lceil;Nicola Nilsen&rfloor;  挪威 风格清新甜美</span>
					</div>
					<p></p>
				</li>
			</ul>
		</div>
		
		
	</body>
</html>
